<template>
  <el-container>
    <!-- 侧边栏 -->
    <el-container>
      <el-aside width="400px">
        <el-form
          :label-position="labelPosition"
          label-width="80px"
          :model="formLabelAlign"
        >
          <el-form-item label="车位名">
            <el-input v-model="formLabelAlign.parkname" clearable></el-input>
          </el-form-item>
          <el-form-item label="车位金额">
            <el-input v-model="formLabelAlign.parkpay" clearable></el-input>
          </el-form-item>
          <el-form-item label="车位类型">
            <el-select
              v-model="formLabelAlign.parktype"
              placeholder="请选择"
              select
              clearable
            >
              <el-option :value="2" label="地上" />
              <el-option :value="1" label="地下" />
            </el-select>
          </el-form-item>
          <el-form-item label="车位状态">
            <el-select
              v-model="formLabelAlign.parkstatus"
              placeholder="请选择"
              select
              clearable
            >
              <el-option :value="1" label="已有车" />
              <el-option :value="2" label="未有车" />
            </el-select>
          </el-form-item>
        </el-form>
        <el-divider></el-divider>
        <el-footer>
          <el-button
            size="medium"
            type="primary"
            icon="el-icon-search"
            @click="search"
            >查询</el-button
          >
          <el-button
            size="medium"
            type="primary"
            icon="el-icon-edit"
            @click="reset"
          >
            重置</el-button
          >
        </el-footer>
      </el-aside>

      <!-- 主页面 -->
      <el-main>
        <div class="main-top">
          <h2>车位列表</h2>
          <el-button type="success" icon="el-icon-plus" @click="handleAdd"
            >新增</el-button
          >
        </div>
        <el-table
        :header-cell-style="{'background-color':'rgb(238,241,246)'}"
          :data="tableData"
          stripe
          style="width: 100%"
          border
          height="460"
        >
        <el-table-column
      type="index"
      width="50"
      label="序号">
    </el-table-column>
          
          <el-table-column prop="parkname" label="车位名称" sortable>
          </el-table-column>
          <el-table-column prop="parkpay" label="车位金额" sortable>
          </el-table-column>

          <el-table-column prop="parktype" label="车位类型">
            <template slot-scope="scope">
              <el-tooltip
                :content="'park type: ' + scope.row.parktype"
                placement="top"
              >
                <el-switch
                  v-model="scope.row.parktype"
                  active-text="地下"
                  inactive-text="地上"
                  :active-value="1"
                  :inactive-value="2"
                  @change="handletype(scope.row)"
                >
                </el-switch>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="parkstatus" width="200" label="车位状态">
            <template slot-scope="scope">
              <el-tooltip
                :content="'park type: ' + scope.row.parkstatus"
                placement="top"
              >
                <el-switch
                  v-model="scope.row.parkstatus"
                  active-text="已有车"
                  inactive-text="未有车"
                  :active-value="1"
                  :inactive-value="2"
                  @click.native="handlestatus(scope.row)"
                >
                </el-switch>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column width="300" label="操作">
            <template slot-scope="scope">
              <el-button icon="el-icon-share" v-if="scope.row.parkstatus == 2 " :disabled="false" @click="qwer(scope.row)" label="ltr">分配车位</el-button>
              <el-button icon="el-icon-share" v-else :disabled="true" >分配车位</el-button>
              <el-button
                icon="el-icon-edit"
                @click="edit(scope.row)"
                >编辑</el-button
              >
              <el-button
                icon="el-icon-delete"
                @click="deleted(scope.row, scope.$index)"
                >移除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
<!-- 抽屉 -->
        <el-drawer
  title="车位分配"
  :visible.sync="table"
  direction="ltr"
  size="50%"
  >
  
   <el-table ref="table" @selection-change="handleSelectionChange"  :data="ddData" border  stripe :header-cell-style="{'background-color':'rgb(238,241,246)'}">
    <el-table-column type="selection" width="55" align="center"></el-table-column>
    <el-table-column prop="username" label="用户账号" >

      </el-table-column>
      <el-table-column prop="homeaddress" label="家庭住址" ></el-table-column>
      <el-table-column prop="type" label="类型">

      </el-table-column>
      <el-table-column prop="parkname" label="车位"></el-table-column>
     
    </el-table>
    
    <div class="apagination">
      <el-pagination
      @size-change="ahandleSizeChange"
      @current-change="ahandleCurrentChange"
      :current-page="pafe.acur_page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pafe.apageSize"
      layout="total, sizes, prev, pager, next, jumper"
      background
      :total="pafe.atotal">
    </el-pagination>
        </div>
    <div class="botb">
        <el-button type="">取消</el-button>
    <el-button type="primary" @click="handlea">确定</el-button>
  </div>
</el-drawer>

        <div class="pagination">
          <el-pagination
            @current-change="handleCurrentChange"
            layout="total, sizes,prev, pager, next, jumper"
            :page-size="pageSize"
            :current-page="cur_page"
            :page-sizes="[9, 10, 20, 50]"
            :total="total"
            background
            @size-change="handleSizeChange"
          >
          </el-pagination>
        </div>
      </el-main>
    </el-container>
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form
        ref="form"
        :model="form"
        label-width="100px"
        :data="form"
        :rules="rules"
      >
        <el-form-item label="车位名称" prop="parkname">
          <el-input
            style="width: 650px"
            v-model="form.parkname"
            placeholder="请输入品牌商名称"
          />
        </el-form-item>
        <el-form-item label="车位金额" prop="parkpay">
          <el-input
            style="width: 650px"
            v-model="form.parkpay"
            placeholder="请输入介绍"
          />
        </el-form-item>
        <el-form-item label="车位类型" prop="parktype">
          <el-select
            style="width: 650px"
            v-model="form.parktype"
            placeholder="请选择"
            select
          >
            <el-option :value="1" label="地上" />
            <el-option :value="2" label="地下" />
          </el-select>
        </el-form-item>
        <el-form-item label="车位状态" prop="parkstatus">
          <el-select
            style="width: 650px"
            v-model="form.parkstatus"
            placeholder="请选择"
            select
          >
            <el-option :value="1" label="未有车" />
            <el-option :value="2" label="已有车" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        
        <el-button type="primary" @click="submitForm" v-if="title == '增加'"
          >确 定</el-button
        >
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" v-if="title == '编辑'" @click="save"
          >保存</el-button
        >
        <el-button type="primary" v-if="title == '编辑'" @click="re"
          >重置</el-button
        >
        
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      rules: {
        parkname: [
          { required: true, message: "车位名称不能为空", trigger: "blur" },
        ],
        parkpay: [
          { required: true, message: "车位金额不能为空", trigger: "blur" },
        ],
        parktype: [
          { required: true, message: "车位类型不能为空", trigger: "blur" },
        ],
      },
      multipleSelection:[],
     

      direction: 'ltr',
      table: false,
      title: "新增车位",
      //模态框开关
      open: false,
      //分页
      pafe:{
        atotal: 0,
      acur_page: 1,
      apageSize: 10,
      
      },
      total: 0,
      cur_page: 1,
      pageSize: 9,
      labelPosition: "top",
      //查找
      formLabelAlign: {
        parkpay: "",
        parkstatus: "",
        parktype: "",
        parkname: "",
      },
      ddData:[],
      tableData: [],
      form: {
        parkpay: "",
        parkstatus: "",
        parktype: "",
        parkname: "",
        id:"" 
      },
      ddata:{
        parkpay: "",
        parkstatus: "",
        parkId: "",
        parkname: "",
        id:""
      },
      qq:{

      }
    };
  },

  methods: {
    qwer(val){
      this.table = true
      this.qq= val
    },
    handlea(){
      
      console.log(this.multipleSelection[0])
      
      this.$confirm("确定分配该车位？", "提示", {
        type: "warning",
      }).then(()=>{
        if(this.multipleSelection==[]){
          return false
        }else{
          
          this.$axiosToken({
            url:'/users/updateParkStatus',
            method:'post',
            data:{
              u_id:this.multipleSelection[0].id,
              parkId:this.multipleSelection[0].parkId,
              parkname:this.multipleSelection[0].parkname,
              parkstatus:this.multipleSelection[0].parkstatus
            },
            success:(result)=>{
           
                this.qq.parkstatus = 1
                
              this.$message({
                showClose: true,
                message: "车位分配成功",
                type: "success",
              });
              
              this.table=false
              
            },
          
          })
        }
      } )

      
    },
    handleSelectionChange(val) {
        // 单选
        if (val.length > 1) {
            this.$refs.table.clearSelection()
            this.$refs.table.toggleRowSelection(val.pop())
        }
        this.multipleSelection = val
    },
    //渲染抽屉页面 
    getDataa() {
      this.$Axios({
        url: "/users/getUsersData",
        method: "get",
        data: {
          type: 1,
          pageNum: this.pafe.apageSize,
          currPage: this.pafe.acur_page - 1,
        },
        success: (result) => {
          this.ddData = result.data;
          this.pafe.atotal = result.total;
        },
      });
    },
    
    
    //车位有没有
    handletype(val){
    
    
  this.$axiosToken({
            url: '/parking/editParkData',
            method: 'post',
            data:{
              u_id:val.id,
              parkstatus:val.parkstatus,
              parkname:val.parkname,
              parktype:val.parktype,
              parkpay:val.parkpay
            },
            
            success: (result) => {
              
                this.getData()
                this.$message({
                showClose: true,
                message: "车位类型更新成功",
                type: "success",
              });
            },
          });
  },
   handlestatus(val){
    
    
  this.$axiosToken({
            url: '/parking/editParkData',
            method: 'post',
            data:{
              u_id:val.id,
              parkstatus:val.parkstatus,
              parkname:val.parkname,
              parktype:val.parktype,
              parkpay:val.parkpay
            },
            
            success: (result) => {
               
                this.getData()
                this.$message({
                showClose: true,
                message: "车位状态更新成功",
                type: "success",
              });
            },
          });
  },
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getData();
      
    },
    handleSizeChange(val) {
      this.cur_page = 1;
      this.pageSize = val;
      this.getData();
      
    },
    ahandleCurrentChange(val) {
      this.pafe.acur_page = val;
      this.getDataa();
      
    },
    ahandleSizeChange(val) {
      this.pafe.acur_page = 1;
      this.pafe.apageSize = val;
      this.getDataa();
      
    },
    //关闭模态框
    cancel() {
      this.open = false;
    },
    //新增打开模态框
    handleAdd() {
      (this.open = true), (this.form = {});
      this.title = '增加'
    },
    //获取数据
    getData() {
      this.$Axios({
        url: "/parking/getParkData",
        method: "get",
        data: {
          type: 1,
          pageNum: this.pageSize,
          currPage: this.cur_page - 1,
        },
        success: (result) => {
          this.tableData = result.data;
          console.log(this.tableData);
          this.total = result.total;
        },
      });
    },
    //提交
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          this.$message.error({
            message: "必填项不能为空",
            duration: 2000,
          });
        } else {
          this.$axiosToken({
            url: "parking/addParkData",
            method: "post",
            data: {
              parkname: this.form.parkname,
              parkpay: this.form.parkpay,
              parkstatus: this.form.parkstatus,
              parktype: this.form.parktype,
            },
            success: (result) => {
              console.log(result);
              this.getData();
              this.$message({
                showClose: true,
                message: "添加成功",
                type: "success",
              });
            },
          });
          this.open = false;
        }
      });
    },
    //查询
    search() {
      this.$axiosToken({
        url: "/parking/getParkData",
        method: "get",
        data: {
          type: 1,
          parkname: this.formLabelAlign.parkname,
          parkpay: this.formLabelAlign.parkpay,
          parkstatus: this.formLabelAlign.parkstatus,
          parktype: this.formLabelAlign.parktype,
          pageNum: this.pageSize,
          currPage: this.cur_page - 1,
        },
        success: (result) => {
          this.tableData = result.data;
          this.total = result.total;

          setTimeout(() => {
            this.loading = false;
          }, 100);
        },
      });
    },
    reset() {
      (this.formLabelAlign = {}), this.getData();
    },
    //删除
    deleted(row, index) {
      this.$confirm("确定删除该用户？", "提示", {
        type: "warning",
      }).then(() => {
        const id = row.id;
        this.$axiosToken({
          url: "parking/delParkData",
          method: "get",
          data: {id:row.id},
          success: (result) => {
            this.getData();
            this.$message({
              showClose: true,
              message: "删除用户成功",
              type: "warning",
            });
          },
        }).catch((reason) => {
          alert("删除失败" + reason);
        });
      });
    },
    re(val) {
      console.log(val)

      
    },
    //编辑
    edit(row) {
      this.title = "编辑", this.open = true;
      console.log(row);
      this.form = JSON.parse(JSON.stringify(row));
     
    },
    //编辑保存
    save(){
                this.$refs['form'].validate((valid)=>{
                    if (!valid){
                        this.$message.error({
                            message: "必填项不能为空",
                            duration: 2000
                        });
                    } else {
                     
                        this.$axiosToken({
                            url: '/parking/editParkData',
                            method: 'post',
                            data:{
                              parkname: this.form.parkname,
              parkpay: this.form.parkpay,
              parkstatus: this.form.parkstatus,
              parktype: this.form.parktype,
              u_id:this.form.id
                            },
                            success: (result)=>{
                                this.getData()
                                this.$message({
                                    showClose: true,
                                    message: '车位修改成功',
                                    type: 'success'
                                })
                            }
                        });
                        this.open = false
                    }
                })
            },
  },
  created() {
    this.getData();
    this.getDataa()
  },
};
</script>
<style lang="scss" scoped>
::v-deep.el-aside {
  width: 360px !important;
  .el-input--small .el-input__inner {
    height: 40px;
    width: 350px;
  }
  .el-form-item--small.el-form-item {
    margin-bottom: 26px;
  }
  .el-footer {
    text-align: center;
    box-sizing: border-box;
    flex-shrink: 0;
    .el-button--medium {
      padding: 10px 46px;
      font-size: 14px;
      border-radius: 4px;
    }
  }
}
::v-deep.main-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
::v-deep.el-table thead {
  background-color: #4c4f56;
}
.el-pagination {
  text-align: right;
  margin-top: 20px;
}
.botb{
  text-align: right;
  margin-right: 100px;
    margin-top: 20px;
    
}
</style>